<template>
  <div class="home" id="components-layout-demo-basic">
    <a-layout>
      <a-layout-sider style="overflow: auto;">
        <a-menu theme="dark" mode="inline" @select="handleSelect">
          <a-menu-item class="menu-click" v-for="item in Views" :key="item.default.module_index" v-text="item.default.module_name"></a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout-content>
        <component :is="vm_module"></component>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  name: 'Home',
  data() {
    return {
      // 全部的模块
      Views: null,
      // 当前模块的索引值
      theModuleIndex: null,
      // 当前模块
      vm_module: null,
    }
  },
  mounted() {
    // 引入所有views文件夹下的以.main.vue结尾的文件并存储到Views变量中
    const req = require.context('./',true,/\.main.vue$/)
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    this.Views = requireAll(req).sort((a,b) => a.default.module_index - b.default.module_index);
    // 让module_default为true的模块默认显示
    this.theModuleIndex = this.Views.findIndex(item => item.default.module_default);
    this.$nextTick(() => {
      $('.menu-click').eq(this.theModuleIndex).click();
    })
  },
  methods: {
    handleSelect({ key }) {
      // 找到所点击menu对应模块的模块索引值
      this.theModuleIndex = this.Views.findIndex(item => item.default.module_index == key);
      // 显示此模块
      this.vm_module = this.Views[this.theModuleIndex].default;
    },
  },
}
</script>

<style  scoped>
.home {
  height: 100%;
}
.ant-layout {
  height: 100%;
}
</style>